<template>
  <div class="dish-pos">
<!--    添加菜品-->
    <form class="form-inline">
<!--      @submit.prevent="onFormSubmit"-->
      <div class="input-group mb-2 mr-sm-2">
        <!-- 输入框的前缀 -->
        <div class="input-group-prepend">
          <div class="input-group-text">菜品名</div>
        </div>
        <!-- 文本输入框 -->
        <input type="text" class="form-control" placeholder="请填写菜品名" style="width: 356px;" v-model.trim="InputDish.dishName" />
        <div class="input-group-prepend">
          <div class="input-group-text">菜品价格</div>
        </div>
        <input type="text" class="form-control" placeholder="请填写菜品价格" style="width: 356px;" v-model.trim="InputDish.dishPrice" />
        <div class="input-group-prepend">
          <div class="input-group-text">菜品描述</div>
        </div>
        <input type="text" class="form-control" placeholder="请填写菜品描述" style="width: 356px;" v-model.trim="InputDish.dishDescription" />
      </div>
      <!-- 添加按钮 -->
      <button type="submit" class="btn btn-primary mb-2" @click.prevent="insertDish">添加菜品</button>

    </form>

  </div>
  <div>
    <table class="table">
      <thead>
      <tr>

        <th scope="col">#</th>
        <th scope="col">dishName</th>
        <th scope="col">dishDescription</th>
        <th scope="col">dishPrice</th>
        <th scope="col">dishGrade</th>
        <th scope="col">dishSales</th>
        <th scope="col">isSale</th>
        <th scope="col">isRecommend</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in DishList" :key="item.dishNumber">
        <th scope="row">{{++index}}</th>
        <td>
          <input class="btn btn-primary" :placeholder="item.dishName" v-model="item.dishName" style="width: 150px">
          <button type="button" class="btn btn-primary" @click.prevent="updateDishName(item)">更新</button>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.dishDescription" v-model="item.dishDescription">
          <button type="button" class="btn btn-primary" @click.prevent="updateDishDescription(item)">更新</button>
        </td>
        <td>
          <input class="btn btn-primary" :placeholder="item.dishPrice" v-model="item.dishPrice" style="width: 80px">
          <button type="button" class="btn btn-primary" @click.prevent="updateDishPrice(item)">更新</button>
        </td>
        <td>{{item.dishGrade}}</td>
        <td>{{item.dishSales}}</td>
        <td>
          <div class="btn btn-primary"  style="width: 70px">{{item.isSale ? "在售" : "未售"}}</div>
          <button type="button" class="btn btn-primary" @click.prevent="updateIsSale(item)">更新</button>
        </td>
        <td>{{item.isRecommend}}</td>
        <td><button type="submit" class="btn btn-primary mb-2" style="background-color: red;border: none" @click.prevent="deleteDish(item)">删除菜品</button></td>
      </tr>

      </tbody>
    </table>



  </div>
</template>

<script>


export default {
  name: 'Dish',

  data() {
    return {
      InputDish: {
        merchantPhoneNumber: "",
        dishName: "",
        dishDescription: "",
        dishPrice: "",
      },

      DishList: []
    }
  },

  methods: {
    async getDishes() {
      const {data: res} = await this.$http.get('/dish/dishList?phoneNumber='+localStorage.getItem("username_M"))
      this.DishList=res.data
    },

    async insertDish() {
      this.InputDish.merchantPhoneNumber=localStorage.getItem("username_M")
      const {data: res} = await this.$http.post('/dish/insertDish',this.InputDish)
      await this.getDishes()
    },



    async updateDishName(item) {
      console.log(item.dishNumber)
      console.log(item.dishName)
      const {data: res} = await this.$http.get('/dish/updateDishName?dishNumber='+item.dishNumber+
      '&dishName='+item.dishName)
      await this.getDishes()

    },

    async updateDishDescription(item) {
      console.log(item.dishNumber)
      console.log(item.dishDescription)
      const {data: res} = await this.$http.get('/dish/updateDishDescription?dishNumber='+item.dishNumber+
          '&dishDescription='+item.dishDescription)
      await this.getDishes()

    },

    async updateDishPrice(item) {
      console.log(item.dishNumber)
      console.log(item.dishPrice)
      const {data: res} = await this.$http.get('/dish/updateDishPrice?dishNumber='+item.dishNumber+
          '&dishPrice='+item.dishPrice)
      await this.getDishes()

    },

    async updateIsSale(item) {
      console.log(item.dishNumber)
      console.log(item.isSale)
      if (item.isSale===1){
        item.isSale=0;
      }
      else item.isSale=1;
      const {data: res} = await this.$http.get('/dish/updateIsSale?dishNumber='+item.dishNumber+
          '&isSale='+item.isSale)
      await this.getDishes()

    },

    async deleteDish(item) {
      const {data: res} = await this.$http.get('/dish/deleteDish?dishNumber='+item.dishNumber)
      await this.getDishes()
    }


  },

  created() {
    this.getDishes()
  },


}
</script>

<style lang="less" scoped>
.dish-pos{
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  border: 50px solid white;

}

</style>
